<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<!-- 引入插件 -->
		<script src="js/echarts.min.js"></script>
	</head>
	<style>
		#chart1,
		#chart2,
		#chart3,
		#chart4,
		#chart5 {
			width: 32%;
			height: 400px;
			border: 1px solid #000;
			display: inline-block;
		}
	</style>
	<body>
		<div id='app'>
			<div id='chart1'></div>
			<div id='chart2'></div>
			<div id='chart3'></div>
			<div id='chart4'></div>
			<div id='chart5'></div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {

					}
				},
				created() {

				},
				mounted() {
					this.drawChart()
					this.drawChart2()
					this.drawChart3()
					this.drawChart4()
					this.drawChart5()
				},
				methods: {
					drawChart() {
						var chartDom = document.getElementById('chart1');
						var myChart = echarts.init(chartDom);
						var option;
						option = {
							title: {
								text: '这是主标题',
								subtext: '这是副标题',
								left: 'center',
								top: '10px',
								textStyle: {
									color: 'blue'
								}
							},
							legend: {
								show: true,
								data: ['甲订单量','乙订单量'],
								left: '10px',
								top: '10px'
							},
							xAxis: {
								type: 'category',
								data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
								axisLine: {//坐标轴线
									show: true,
									lineStyle: {
										color: 'blue'
									}
								},
								axisTick: { //刻度线
									show: true,
									lineStyle: {
										color: '#0f0'
									}
								},
								axisLabel: { //标签
									color: '#000'
								},
								splitLine: { //分割线
									show: true,
									lineStyle: {
										color: '#999',
										type:'dashed'//虚线
									}
								}
							},
							yAxis: {
								type: 'value'
							},
							tooltip:{
								show:true,
								trigger:'axis'
							},
							series: [{
								name: '甲订单量',
								data: [150, 230, 224, 218, 135, 147, 260],
								type: 'line',
								lineStyle: {
									color: 'red'
								}
							},
							{
								name: '乙订单量',
								data: [150, 230, 224, 218, 135, 147, 260],
								type: 'line',
								smooth:true,
								lineStyle: {
									color: 'blue'
								}
							}
							]
						};
						option && myChart.setOption(option);
						//窗口大小变化的时候 图标也变化
						window.addEventListener('resize', function() {
							myChart.resize()
						})
					},
					drawChart2() {
						var chartDom = document.getElementById('chart2');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							xAxis: {
								type: 'category',
								data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
							},
						 yAxis: {
								type: 'value'
							},
							series: [{
								data: [120, 200, 150, 80, 70, 110, 130],
								type: 'bar'
							}]
						};

						option && myChart.setOption(option);
						window.addEventListener('resize', function() {
							myChart.resize()
						})
					},
					drawChart3() {
						var chartDom = document.getElementById('chart3');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							title: {
								text: 'Referer of a Website',
								subtext: 'Fake Data',
								left: 'center'
							},
						 tooltip: {
								trigger: 'item'
							},
							legend: {
								orient: 'vertical',
								left: 'left'
							},
						 series: [{
								name: 'Access From',
								type: 'pie',
								radius: '50%',
								data: [{
						                value: 1048,
										name: 'Search Engine'
									},
									{
										value: 735,
										name: 'Direct'
									},
									{
										value: 580,
										name: 'Email'
									},
									{
										value: 484,
										name: 'Union Ads'
									},
									{
										value: 300,
										name: 'Video Ads'
									}
								],
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						};

						option && myChart.setOption(option);
						window.addEventListener('resize', function() {
							myChart.resize()
						})
					},
					drawChart4() {
						var chartDom = document.getElementById('chart4');
						var myChart = echarts.init(chartDom);
						var option;
						option = {
							title: {
								text: 'World Population'
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'shadow'
						  }
							},
							legend: {},
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: {
						 	type: 'value',
						 	boundaryGap: [0, 0.01]
							},
							yAxis: {
								type: 'category',
								data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
							},
						 series: [{
									name: '2011',
									type: 'bar',
									data: [18203, 23489, 29034, 104970, 131744, 630230]
								},
								{
									name: '2012',
									type: 'bar',
									data: [19325, 23438, 31000, 121594, 134141, 681807]
								}
							]
						};

						option && myChart.setOption(option);
						window.addEventListener('resize', function() {
							myChart.resize()
						})
					},
					drawChart5() {
						var chartDom = document.getElementById('chart5');
						var myChart = echarts.init(chartDom);
						var option;
						option = {
							title: {
								text: 'Stacked Area Chart'
							},
							tooltip: {
								trigger: 'axis',
						  axisPointer: {
									type: 'cross',
									label: {
										backgroundColor: '#6a7985'
									}
						  }
							},
							legend: {
								data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
							},
							toolbox: {
								feature: {
									saveAsImage: {}
								}
							},
							grid: {
						  left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: [{
								type: 'category',
								boundaryGap: false,
								data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
							}],
							yAxis: [{
								type: 'value'
							}],
							series: [{
									name: 'Email',
									type: 'line',
									stack: 'Total',
									areaStyle: {},
						   emphasis: {
										focus: 'series'
									},
									data: [120, 132, 101, 134, 90, 230, 210]
								},
								{
									name: 'Union Ads',
									type: 'line',
									stack: 'Total',
						   areaStyle: {},
									emphasis: {
										focus: 'series'
									},
									data: [220, 182, 191, 234, 290, 330, 310]
								},
								{
									name: 'Video Ads',
						  	type: 'line',
									stack: 'Total',
									areaStyle: {},
									emphasis: {
										focus: 'series'
									},
									data: [150, 232, 201, 154, 190, 330, 410]
								},
								{
									name: 'Direct',
									type: 'line',
									stack: 'Total',
									areaStyle: {},
									emphasis: {
										focus: 'series'
									},
									data: [320, 332, 301, 334, 390, 330, 320]
								},
								{
									name: 'Search Engine',
									type: 'line',
									stack: 'Total',
									label: {
						   	show: true,
						   	position: 'top'
						  	},
									areaStyle: {},
									emphasis: {
										focus: 'series'
									},
									data: [820, 932, 901, 934, 1290, 1330, 1320]
								}
							]
						};
						option && myChart.setOption(option);
						window.addEventListener('resize', function() {
							myChart.resize()
						})
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>
